<template>
  <!-- 初始化echarts需要一个有宽高的盒子 -->
  <div id="chinachart"></div>
</template>

<script>
import china from '../../../../../assets/lib/china.json'
import jsonp from 'jsonp'
import options from './options'
export default {
  name: 'MapChina',
  props:{
    myVar:{
      type:Number
    }
  },
  watch:{
    myVar:{
      handler: function(nVar){
        if(nVar===0)
          this.drawMap()
        if(nVar===1)
          this.drawMap1()
        if(nVar===2)
          this.drawMap2()
      },
      immediate:true
    }
  },
  mounted(){
    this.drawMap()
  },
  methods:{
     resizeTheChart() {
      if (this.$refs && this.$refs.mapbox) {
        let mychartNode = document.getElementById('mychart');
        mychartNode.style.height = mychartNode.offsetWidth*0.8+'px'
        this.mychart.resize();
      }
    },
    // 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
    getData(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
        if(!err){
          console.log(data)
          //econNum现存确诊、asymptomNum现存无症状
          let list = data.data.list.map(item=>({name:item.name,value:item.value,total:item.value,deathNum:item.deathNum,cureNum:item.cureNum,asymptomNum:item.asymptomNum,econNum:item.econNum,obj: item}))
          options.option.series[0].data = list
          this.mychart.setOption(options.option)
        }
      })
    },
    drawMap(){
      let that = this;
      this.getData()
      this.$echarts.registerMap('china', china);
      this.mychart = this.$echarts.init(document.getElementById('chinachart'));
      this.mychart.setOption(options.option)
      this.mychart.on('click', function (params) {
        console.log(params.dataIndex)
        that.$emit("cityNum",params.dataIndex)
      });
      this.resizeTheChart()
      window.addEventListener("resize", this.resizeTheChart);
    },
    getData1(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
        if(!err){
          console.log(data)
          //econNum现存确诊、asymptomNum现存无症状
          let list = data.data.list.map(item=>({name:item.name,value:item.deathNum,total:item.value,deathNum:item.deathNum,cureNum:item.cureNum,asymptomNum:item.asymptomNum,econNum:item.econNum,obj: item}))
          options.option1.series[0].data = list
          console.log(list)
          this.mychart.setOption(options.option1)
        }
      })
    },
    drawMap1(){
      let that =this;
      this.getData1()
      this.$echarts.registerMap('china', china);
      this.mychart = this.$echarts.init(document.getElementById('chinachart'));
      this.mychart.setOption(options.option1)
      this.mychart.on('click', function (params) {
        console.log(params.data.name)
        that.$emit("cityNum",params.dataIndex)
      });
      this.resizeTheChart()
      window.addEventListener("resize", this.resizeTheChart);
    },
    getData2(){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
        if(!err){
          console.log(data)
          //econNum现存确诊、asymptomNum现存无症状
          let list = data.data.list.map(item=>({name:item.name,value:item.cureNum,total:item.value,deathNum:item.deathNum,cureNum:item.cureNum,asymptomNum:item.asymptomNum,econNum:item.econNum,obj: item}))
          options.option2.series[0].data = list
          console.log(list)
          this.mychart.setOption(options.option2)
        }
      })
    },
    drawMap2(){
      let that = this;
      this.getData2()
      this.$echarts.registerMap('china', china);
      this.mychart = this.$echarts.init(document.getElementById('chinachart'));
      this.mychart.setOption(options.option2)
      this.mychart.on('click', function (params) {
        console.log(params.data.name)
        that.$emit("cityNum",params.dataIndex)
      });
      this.resizeTheChart()
      window.addEventListener("resize", this.resizeTheChart);
    }
  }
}
</script>

<style scoped>
#chinachart{
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>